<template>
  <div class="carousel-container" @mouseenter="pauseAutoplay" @mouseleave="resumeAutoplay">
    <!-- Main carousel display -->
    <div
      class="carousel-track"
      :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <div
        v-for="(slide, index) in slides"
        :key="index"
        class="carousel-slide"
      >
        <img :src="slide.image" :alt="slide.alt || `Slide ${index + 1}`" />
      </div>
    </div>

    <!-- Navigation arrows -->
    <!-- <button
      class="carousel-arrow carousel-arrow-prev"
      @click="prevSlide"
      :class="{ 'hidden': currentIndex === 0 && !loop }"
      aria-label="Previous slide"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m15 18-6-6 6-6"/>
      </svg>
    </button>

    <button
      class="carousel-arrow carousel-arrow-next"
      @click="nextSlide"
      :class="{ 'hidden': currentIndex === slides.length - 1 && !loop }"
      aria-label="Next slide"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m9 18 6-6-6-6"/>
      </svg>
    </button> -->

    <!-- Indicators -->
    <div class="carousel-indicators">
      <button
        v-for="(_, index) in slides"
        :key="index"
        class="carousel-indicator"
        :class="{ 'active': currentIndex === index }"
        @click="goToSlide(index)"
        :aria-label="`Go to slide ${index + 1}`"
      ></button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';

// Props definition
const props = defineProps({
  // Array of slide objects with image and alt properties
  slides: {
    type: Array,
    required: true,
    default: () => []
  },
  // Auto-play interval in milliseconds
  autoplayInterval: {
    type: Number,
    default: 5000
  },
  // Whether to auto-play the carousel
  autoplay: {
    type: Boolean,
    default: true
  },
  // Whether to loop the carousel
  loop: {
    type: Boolean,
    default: true
  },
  // Initial slide index
  initialSlide: {
    type: Number,
    default: 0
  }
});

// Emits
const emit = defineEmits(['slide-change']);

// State
const currentIndex = ref(props.initialSlide);
const autoplayTimer = ref(null);
const isPaused = ref(false);
const touchStartX = ref(0);
const touchEndX = ref(0);

// Methods
const nextSlide = () => {
  if (currentIndex.value < props.slides.length - 1) {
    currentIndex.value++;
  } else if (props.loop) {
    currentIndex.value = 0;
  }
  emit('slide-change', currentIndex.value);
};

const prevSlide = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  } else if (props.loop) {
    currentIndex.value = props.slides.length - 1;
  }
  emit('slide-change', currentIndex.value);
};

const goToSlide = (index) => {
  currentIndex.value = index;
  emit('slide-change', currentIndex.value);
};

const startAutoplay = () => {
  if (props.autoplay && !autoplayTimer.value && !isPaused.value) {
    autoplayTimer.value = setInterval(() => {
      nextSlide();
    }, props.autoplayInterval);
  }
};

const stopAutoplay = () => {
  if (autoplayTimer.value) {
    clearInterval(autoplayTimer.value);
    autoplayTimer.value = null;
  }
};

const pauseAutoplay = () => {
  isPaused.value = true;
  stopAutoplay();
};

const resumeAutoplay = () => {
  isPaused.value = false;
  startAutoplay();
};

// Touch event handlers
const handleTouchStart = (e) => {
  touchStartX.value = e.touches[0].clientX;
};

const handleTouchMove = (e) => {
  touchEndX.value = e.touches[0].clientX;
};

const handleTouchEnd = () => {
  const touchDiff = touchStartX.value - touchEndX.value;

  // Minimum swipe distance (in pixels)
  const minSwipeDistance = 50;

  if (touchDiff > minSwipeDistance) {
    // Swipe left, go to next slide
    nextSlide();
  } else if (touchDiff < -minSwipeDistance) {
    // Swipe right, go to previous slide
    prevSlide();
  }

  // Reset touch values
  touchStartX.value = 0;
  touchEndX.value = 0;
};

// Lifecycle hooks
onMounted(() => {
  startAutoplay();
});

onUnmounted(() => {
  stopAutoplay();
});

// Watch for props changes
watch(() => props.autoplay, (newValue) => {
  if (newValue) {
    startAutoplay();
  } else {
    stopAutoplay();
  }
});

watch(() => props.slides.length, () => {
  // Reset to first slide if current index is out of bounds
  if (currentIndex.value >= props.slides.length) {
    currentIndex.value = 0;
  }
});
</script>

<style lang="scss" scoped>
// Theme color
$theme-color: #845ef5;
$white: #ffffff;
$black: #000000;
$gray: #cccccc;

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;


  &:hover {
    .carousel-arrow {
      opacity: 1;
    }
  }
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
  width: 100%;
}

.carousel-slide {
  flex: 0 0 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba($white, 0.7);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0.7;
  transition: all 0.3s ease;

  &:hover {
    background-color: $white;
    opacity: 1;
  }

  &.hidden {
    display: none;
  }

  svg {
    width: 20px;
    height: 20px;
    stroke: $black;
  }

  &-prev {
    left: 10px;
  }

  &-next {
    right: 10px;
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba($white, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    background-color: $theme-color;
    transform: scale(1.2);
  }

  &:hover {
    background-color: rgba($white, 0.8);
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .carousel-arrow {
    width: 36px;
    height: 36px;

    svg {
      width: 18px;
      height: 18px;
    }
  }

  .carousel-indicator {
    width: 8px;
    height: 8px;
  }
}
</style>
